import React from 'react';
import { Link } from 'react-router-dom';
import './Architect.css';
import './Responsive.css';
import Test1 from '../../../assets/game.svg'
import Test2 from '../../../assets/article.svg'
import Test3 from '../../../assets/datachart.svg'
import Test4 from '../../../assets/message.svg'
import Test5 from '../../../assets/article.svg'
import Test6 from '../../../assets/game.svg'

const LeftPanel = () => {

    const subNavbar = [
        {icon:Test1, title:'Java'},
        {icon:Test2, title:'Python'},
        {icon:Test3, title:'C++'},
        {icon:Test4, title:'Golang'},
        {icon:Test5, title:'C#'},
    ];

    return (
        <div className='left-panel'>
            <div className="avatar">
                <img src={Test6} alt="Avatar" className="avatar-img" />
                <span>KyricoVaderSpaceX</span>
                <span>MyWebsite</span>
            </div>
            <div className="sub-navbar">
                {subNavbar.map((item, index) => (
                    <div>
                        <Link to="/home-page" className="sub-navbar-link" key={index}>
                            <img src={item.icon} alt={`Article ${index + 1}`} className="sub-navbar-icon" />
                            <span className="sub-navbar-title">{item.title}</span>
                        </Link>
                    </div>
                ))}
            </div>

            <div className='left-panel-bottom'>
                <Link to="/home-page" className="left-panel-bottom-link">
                    <div>
                        <img src={Test4} alt="Avatar" style={{height: '100%'}}/>
                    </div>
                </Link>
                <Link to="/editor" className="left-panel-bottom-link">
                    <div>
                        <img src={Test6} alt="Avatar" style={{height: '100%'}}/>
                    </div>
                </Link>
            </div>
        </div>
    );

};

export default LeftPanel;
